<template>
  <div>
    <el-table
      :data="menuList?.children"
      row-key="id"
      border
      :expand-row-keys="['1']"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="toCode" label="跳转权限值" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            :icon="Plus"
            type="success"
            size="small"
            @click="addMenu(row.id)"
          ></el-button>
          <el-button
            :icon="Edit"
            type="primary"
            size="small"
            @click="editMenu(row.name, row.code, row.id, row.pid)"
          ></el-button>
          <el-button
            :icon="Delete"
            type="danger"
            size="small"
            @click="delMenu(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="visible"
      :title="addOrUpdate ? '修改菜单' : '添加菜单'"
      width="50%"
    >
      <!-- :before-close="handleClose" -->
      <el-form
        :model="addOrUpdateForm"
        label-width="120px"
        :rules="addMenuFormRules"
        ref="addMenuForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="addOrUpdateForm.name" />
        </el-form-item>
        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="addOrUpdateForm.code" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="saveMenu">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ZMenu',
}
</script>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import {
  getMenuApi,
  addMenuApi,
  updateMenuApi,
  removeMenuApi,
} from '@/api/menu/menuApi'
import type { MenuDataType, MenuItem } from '@/api/menu/model/menuType'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

// 表单验证
const addMenuFormRules = reactive<FormRules>({
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  code: [{ required: true, message: '必填', trigger: 'blur' }],
})
// 表单实例
const addMenuForm = ref<FormInstance>()
const visible = ref(false)
const addOrUpdate = ref(false) // false表示添加  true表示编辑
const addOrUpdateForm = reactive({
  name: '',
  code: '',
  pid: '',
  id: '',
})

// 添加菜单
const addMenu = (id: string) => {
  addOrUpdateForm.pid = ''
  addOrUpdateForm.name = ''
  addOrUpdateForm.code = ''
  addOrUpdate.value = false
  addOrUpdateForm.pid = id
  visible.value = true
}
// 编辑菜单
const editMenu = (name: string, code: string, id: string, pid: string) => {
  addOrUpdateForm.pid = pid
  addOrUpdateForm.id = id
  addOrUpdate.value = true
  addOrUpdateForm.name = name
  addOrUpdateForm.code = code
  visible.value = true
}
// 提交表单
const saveMenu = () => {
  addMenuForm.value?.validate(async (valid) => {
    if (valid) {
      if (addOrUpdate.value) {
        //
        await updateMenuApi({ ...addOrUpdateForm })
        ElMessage.success('修改成功')
      } else {
        await addMenuApi(addOrUpdateForm)
        ElMessage.success('添加成功')
      }
      visible.value = false
      getMenuList()
    }
  })
}
// 删除菜单
const delMenu = (row: MenuItem) => {
  // console.log(row)

  ElMessageBox.confirm('删掉就没了哦，确定要删吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const { id } = row
      await removeMenuApi(id)
      ElMessage.success('删除成功')
      getMenuList()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}

// 封装获取数据的函数
const getMenuList = async () => {
  menuList.value = await getMenuApi()
}
// 菜单列表
const menuList = ref<MenuDataType>()
onMounted(getMenuList)
</script>

<style scoped></style>
